<template>
  <div class="side-menu-cmp">
    <el-tree :data="menuData" :props="menuItemProps" :highlight-current="true" :default-expand-all="true" @node-click="handleMenuClick"></el-tree>
    <div class="side-menu-bg-bottom" :style='{"background-image": backgroundUrl, "background-repeat": "no-repeat", "background-position": "center center", "opacity": "0.5", "background-size": "contain"}'></div>
  </div>
</template>

<script>
import router from '../../router';
export default {
  name: 'SideMenu',
  props:["title", "config"],
  data () {
    return {
      backgroundUrl: `url("${require('../../assets/factory-min-1.png')}")`,
      menuData: [
        {
          id: 1,
          name: '小型电芯产品线',
          children: [
            {
              id: 11,
              name: 'B2-2F-01线',
              routeName: '/factoryMinDetail',
            },
            {
              id: 12,
              name: '装配车间',
              routeName: '/factoryMinDetail',
            },
            {
              id: 13,
              name: '检测车间',
              routeName: '/factoryMinDetail',
            }
          ],
          bgUrl: `url("${require('../../assets/factory-min-1.png')}")`
        },
        {
          id: 2,
          name: 'C项目产品线',
          children: [
            {
              id: 21,
              name: 'B2-2F-01线',
              routeName: '/factoryMinDetail',
            },
            {
              id: 22,
              name: '装配车间',
              routeName: '/factoryMinDetail',
            },
            {
              id: 23,
              name: '检测车间',
              routeName: '/factoryMinDetail',
            }
          ],
          bgUrl: `url("${require('../../assets/factory-min-2.png')}")`
        },
        {
          id: 3,
          name: 'C项目产品线',
          children: [
            {
              id: 31,
              name: 'B2-2F-01线',
              routeName: '/factoryMinDetail',
            },
            {
              id: 32,
              name: '装配车间',
              routeName: '/factoryMinDetail',
            },
            {
              id: 33,
              name: '检测车间',
              routeName: '/factoryMinDetail',
            }
          ],
          bgUrl: `url("${require('../../assets/factory-min-3.png')}")`
        },
        {
          id: 4,
          name: '镍氢产品线',
          children: [
            {
              id: 41,
              name: 'B2-2F-01线',
              routeName: '/factoryMinDetail',
            },
            {
              id: 42,
              name: '装配车间',
              routeName: '/factoryMinDetail',
            },
            {
              id: 43,
              name: '检测车间',
              routeName: '/factoryMinDetail',
            }
          ],
          bgUrl: `url("${require('../../assets/factory-min-4.png')}")`
        }
      ],
      menuItemProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    handleMenuClick(selData, currentNode) {
      if(selData && selData.routeName) {
        this.backgroundUrl = currentNode.parent.data.bgUrl || '';
        router.push(selData.routeName).catch(() => {});
      }else {
        this.backgroundUrl = selData.bgUrl || '';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.side-menu-cmp {
  width: 300px;
  // height: 100%;
  color: #fff;
  padding-top: 30px;
  background-color: rgba($color: #005ABF, $alpha: 0.2);
  overflow: auto;
  position: relative;

  .side-menu-bg-bottom {
    position: absolute;
    width: 100%;
    height: 158px;
    bottom: 0;
  }
}
</style>
<style scoped>
.side-menu-cmp >>> .el-tree {
  background: rgba(0, 90, 191, 0.4);
  color: #FFF;
  padding: 10px 0px;
}

.side-menu-cmp >>> .el-tree-node .el-tree-node__content {
  margin: 5px 0px;
}

.side-menu-cmp >>> .el-tree-node__content .el-tree-node__label {
  font-size: 0.175rem;
}

.side-menu-cmp >>> .el-tree-node__content:hover, .el-upload-list__item:hover {
  background-color: rgb(0, 154, 223);
}

.side-menu-cmp >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgb(0, 154, 223);
}
</style>
